<template>
  <div class="user-container">
    <el-row :gutter="20">
      <el-col :span="6" class="user-left-dept-tree">
        <h4>部门列表</h4>
        <div style="display:flex; margin:10px 0px">
          <el-input v-model="filterTree" clearable placeholder="请输入部门名称" size="small"></el-input>
        </div>
        <!-- el-scrollbar是el中的隐藏组件 -->
        <el-scrollbar style="height:100%">
          <el-tree
            ref="tree"
            :highlight-current="true"
            node-key="id"
            :data="depts"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-scrollbar>
      </el-col>
      <el-col :span="17" class="user-right-list">
        <div class="search">
          <el-form :inline="true" :model="searchform" ref="searchform" class="demo-form-inline">
            <el-form-item label="人员查询" prop="key">
              <el-input v-model="searchform.key" clearable placeholder="人员查询" size="mini"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="listPage">查询</el-button>
              <el-button type="primary" size="mini" @click="resetForm('searchform')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="body">
          <el-button type="primary" size="small" @click="handleAdd">添加用户</el-button>
          <el-table
            :data="users"
            style="margin:20px 0px;"
            row-key="id"
            border
            align="center"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="name" label="昵称"></el-table-column>
            <el-table-column prop="gender" label="性别">
              <template v-slot="{row}">
                <span v-text="row.gender === 0 ? '男': '女'"></span>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template v-slot="{row}">
                <span v-text="row.status === 1 ? '正常': '禁用'"></span>
              </template>
            </el-table-column>
            <el-table-column prop="descript" label="描述"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="250px" fixed="right" header-align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="relative(scope.row)">关联角色</el-button>
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            style="text-align:center;"
            :current-page="searchform.pageNum"
            :page-sizes="[5, 10, 15]"
            :page-size="searchform.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 新增 / 编辑 -->
    <add-and-update
      ref="addAndUpdate"
      v-model="drawerVisible"
      :departments="depts"
      @refresh="refresh"
    ></add-and-update>
    <!-- 绑定权限 -->
    <relative-index ref="relativeIndex" v-model="relativeVisible"></relative-index>
  </div>
</template>

<script>
import { list } from "@/api/department";
import { listPage, del } from "@/api/user";
import addAndUpdate from "./add-and-update/index";
import relativeIndex from "./relative/index";
export default {
  name: "user",
  components: { addAndUpdate, relativeIndex },
  data() {
    return {
      filterTree: "",
      depts: [],
      defaultProps: {
        children: "children",
        label: "dname"
      },
      users: [],
      searchform: {
        pageNum: 1,
        pageSize: 5,
        key: "",
        deptId: null
      },
      total: 0,
      drawerVisible: false,
      relativeVisible: false
    };
  },
  created() {
    this.listDepts();
    this.listPage();
  },
  methods: {
    async listDepts() {
      const { data } = await list();
      this.depts = data;
    },
    async listPage() {
      const { data } = await listPage(this.searchform);
      this.users = data.data;
      this.searchform.pageNum = data.pageNum;
      this.searchform.pageSize = data.pageSize;
      this.total = data.total;
    },
    handleNodeClick(data) {
      this.searchform.deptId = data.id;
      this.listPage(this.searchform);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.dname.indexOf(value) !== -1;
    },
    handleAdd() {
      this.drawerVisible = true;
    },
    handleEdit(index, row) {
      this.$refs["addAndUpdate"].init(row.id);
      this.$nextTick(() => {
        this.drawerVisible = true;
      });
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await del(row.id);
          this.listPage();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    resetForm(formname) {
      this.$refs[formname].resetFields();
      this.searchform.deptId = null;
      this.listDepts();
      this.listPage();
    },
    refresh() {
      this.drawerVisible = false;
      this.listPage();
    },
    // 关联角色
    relative(data) {
      this.$refs["relativeIndex"].init(data.id);
      this.$nextTick(() => {
        this.relativeVisible = true;
      });
    }
  },
  watch: {
    filterTree(val) {
      this.$refs["tree"].filter(val);
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  &-container {
    margin: 30px;
  }
  &-left-dept-tree {
    margin-right: 10px;
    background-color: #fff;
  }
  &-right-list {
    .search {
      height: 70px;
      padding: 10px 10px;
      border-radius: 5px;
      background-color: #fff;
    }

    .body {
      border-radius: 5px;
      background-color: #fff;
      margin: 20px 0px;
      padding: 20px 10px;
    }
  }

  &-left-dept-tree,
  &-right-list {
    height: 600px;
  }
}
</style>